import React, { PureComponent } from 'react'
import { CSSTransition } from 'react-transition-group'
import { Card, Avatar } from 'antd'
import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons'
import './cssTransition.css'
const { Meta } = Card

export default class cssTransitionDEMO extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      isShow: true,
    }
  }
  render() {
    const { isShow } = this.state
    return (
      <>
        <button
          onClick={() =>
            this.setState({
              isShow: !isShow,
            })
          }
        >
          {!isShow ? '显示' : '隐藏'}
        </button>
        <CSSTransition in={isShow} classNames='card' appear={true} timeout={500} unmountOnExit={true}>
          <Card
            style={{ width: 300 }}
            cover={<img alt='example' src='https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png' />}
            actions={[<SettingOutlined key='setting' />, <EditOutlined key='edit' />, <EllipsisOutlined key='ellipsis' />]}
          >
            <Meta avatar={<Avatar src='https://joeschmoe.io/api/v1/random' />} title='Card title' description='This is the description' />
          </Card>
        </CSSTransition>
      </>
    )
  }
}
